<template>
	<view class="avatar flex">
		<image :src="user.avatar" mode="aspectFill"></image>
		<view class="infoMsg">
			<view class="fwb">{{ user.username }}</view>
			<view class="c9">所属地:{{ user.city }}</view>
			<view class="c9">身份:{{ roleName }}</view>
		</view>
	</view>
</template>

<script setup>
import { computed, reactive } from 'vue';
const user = reactive({
	avatar: '../../uni_modules/uni-id-pages/static/app-plus/uni-fab-login/qq.png',
	username: 'xxx',
	city: '广东省',
	roles: 0
});
const roleName = computed(() => {
	switch (user.roles) {
		case 0:
			return '工作组';
			break;
		case 1:
			return '项目经理';
			break;
		case 'user':
			return '甲方';
			break;
	}
});
defineExpose({
	user
});
</script>

<style lang="scss">
.avatar {
	image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50px;
		border: 1px solid #eee;
		margin-right: 30rpx;
	}
	.infoMsg {
		width: 600rpx;
		view {
			font-size: 24rpx;
			&:nth-child(1) {
				font-size: 32rpx;
			}
			&:nth-child(2) {
				margin: 10rpx 0;
			}
		}
	}
}
</style>